import React, { Component } from 'react'
import { Card, Button } from 'antd'
import ReactEcharts from 'echarts-for-react'

/**
 * 柱形图组件--bar
 */
export default class Bar extends Component {
  constructor(props) {
    super(props)
    this.state = {
      sales: [15, 30, 36, 40, 20, 60],
      inventorys: [25, 40, 49, 34, 25, 48]
    }
  }

  //返回柱状图的配置对象
  getOption = () => {
    const { sales, inventorys } = this.state
    return {
      title: {
        text: 'React Echarts 柱形图'
      },
      tooltip: {},
      grid: {
        bottom: 20
      },
      legend: {
        data: ['销量', '库存']
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: sales,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: '#00FFCC' }, // 渐变起始颜色
                { offset: 1, color: '#66CCFF' }, // 渐变结束颜色
              ],
              global: false, // 使用局部渐变
            },
          },
          label: {
            show: true,
            position: "top",  // 展示在柱子的上方
            color: '#336666'
          }
        },
        {
          name: '库存',
          type: 'bar',
          data: inventorys,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: '#33CCFF' }, // 渐变起始颜色
                { offset: 1, color: '#33CCCC' }, // 渐变结束颜色
              ],
              global: false, // 使用局部渐变
            },
          },
          label: {
            show: true,
            position: "top",  // 展示在柱子的上方
            color: '#66CCFF'
          }
        }
      ]
    }
  }

  //更新的方法
  update = () => {
    const sales = this.state.sales.map(sale => sale + 1)
    const inventorys = this.state.inventorys.map(inventory => inventory - 1)
    this.setState({
      sales,
      inventorys
    })
  }
  render() {
    return (
      <div>
        <Card>
          <Button type='primary' onClick={this.update}>更新</Button>
        </Card>
        <Card title='柱状图一'>
          <ReactEcharts option={this.getOption()} style={{ height: 300 }} />
        </Card>
      </div>
    )
  }
}
